<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <a-row>
      <a-col :span="24">
        <a-form layout="inline" :form="form" @submit="handleSubmit">
          <a-form-item label="标题">
            <a-input placeholder="请输入标题" v-decorator="['name']"></a-input>
          </a-form-item>
          <a-form-item label="适用小程序">
            <a-select style="width:200px" v-decorator="['brandId']" placeholder="全部">
              <a-select-option :value="item.weid" v-for="item in brands" :key="item.weid">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit">搜索</a-button>
            <a-button type="primary" @click="resetForm" style="margin-left:10px">重置</a-button>
            <a-button type="primary" style="margin-left:10px" @click="add(null)">新增</a-button>
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24" style="margin-top:20px">
        <a-table
          bordered
          :columns="columns"
          :rowKey="record => record.id"
          :data-source="dataSource"
          :pagination="pagination"
          :scroll="{ x: true }"
          @change="handleTableChange"
        >
          <template slot="customImage" slot-scope="text, record">
            <img class="poster" @click="prevImg(record.img)" :src="record.img" />
          </template>
          <template slot="sendType" slot-scope="text, record">
            <span v-if="record.notifyFixedTime">自动推送<br/>{{record.notifyFixedTime}}</span>
            <span v-else>手动推送</span>
          </template>
          <span slot="brand" slot-scope="text, record">{{ searchBrand(record.brandId).name }}</span>
          <span slot="pushfailNum" slot-scope="text, record">{{ record.subscribeNum - record.pushSuccessNum }}</span>
          <span slot="action" class="action" slot-scope="text, record">
             <a href="javascript:;"  @click="copy(record)">复制路径</a>
            <a @click="add(record)" class="ml-10" style="padding-left: 5px;">编辑</a>
            <br/>
            <a href="javascript:;"  @click="showModal(record)">推送消息</a>
            <a-dropdown class="ml-10">
              <a class="ant-dropdown-link"  @click="e => e.preventDefault()"> 更多 <a-icon type="down" /> </a>
              <a-menu slot="overlay">
                <!-- <a-menu-item>
                  <a href="javascript:;" @click="copy(record)">复制路径</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;" @click="showModal(record)">推送消息</a>
                </a-menu-item> -->
                <a-menu-item>
                  <a href="javascript:;" @click="downLoad(record)">下载推送数据</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;" @click="deleteRecord(record)">删除</a>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </span>
        </a-table>
      </a-col>
    </a-row>
    <input type="text" id="copy" />
    <a-modal v-model="visible" title="图片预览" @ok="visible = false" :footer="null" width="60%" :mask="true">
      <div class="previmg">
        <img :src="prevImageUrl" />
      </div>
    </a-modal>
    <messageForm @close="handleCancel" v-if="showForm" :formTile="formTile" :message="message"></messageForm>
  </a-card>
</template>

<script>
import messageForm from './form'
import { downLoadLog, sendMessage, messageDelete, exportXsl } from '@/api/micromall'
import { listMixin } from '../util/listMixin'

const columns = [
  {
    title: 'id',
    dataIndex: 'id'
  },
  {
    title: '标题',
    width: 200,
    dataIndex: 'name'
    // slots: { title: 'customTitle' },
    // scopedSlots: { customRender: 'name' },
  },
  {
    title: '图片',
    width: 100,
    dataIndex: 'img',
    align:'center',
    scopedSlots: { customRender: 'customImage' }
  },
  {
    title: '模板名称',
    width: 200,
    dataIndex: 'linkName',
    template: 'linkName'
  },
  {
    title: '适用小程序',
    width: 120,
    // dataIndex: 'brandId',
    scopedSlots: { customRender: 'brand' }
  },
  {
    title: '推送方式',
    width: 160,
    
    // dataIndex: 'brandId',
    scopedSlots: { customRender: 'sendType' }
  },
  {
    width: 120,
    title: '真实订阅人数',
    dataIndex: 'subscribeNum'
    // scopedSlots: { customRender: 'tags' },
  },
  {
    width: 120,
    title: '推送成功数',
    dataIndex: 'pushSuccessNum'
    // scopedSlots: { customRender: 'tags' },
  },
  {
    width: 120,
    title: '推送失败数',
    dataIndex: 'pushFailNum'
    // scopedSlots: { customRender: 'pushfailNum' }
  },
  {
    title: '创建时间',
    // width: 200,
    dataIndex: 'createTime'
    // scopedSlots: { customRender: 'tags' },
  },
  {
    title: '操作',
    width: 150,
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  mixins: [listMixin],
  components: { messageForm },
  data() {
    return {
      showEdit: false,
      confirmLoading: false,
      message: null,
      formTile: '新增',
      showForm: false,
      columns,
      prevImageUrl: '',
      visible: false,
      message: null,
      wxPagePath: '/packages/wm-cloud-jnbyactive/serviceNotification/index?templateConfigId=',
      url: {
        list: '/jic-backend-wechat/wechat-client/template/config/list',
        delete: '/jic-backend-wechat/wechat-client/template/config'
      }
    }
  },

  methods: {
    handleCancel() {
      this.loadData()
      this.showForm = false
      this.messageId = -1
    },
    prevImg(url) {
      if (typeof url == 'string' && url != '') {
        this.prevImageUrl = url
        this.visible = true
      }
    },
    handleDropDown(text, record, e) {
      console.log(text, record, e)
      switch (record.key) {
      }
    },
    // 复制路径
    copy(text) {
      console.log(text)
      var inputNode = document.getElementById('copy')
      inputNode.value = this.wxPagePath + text.id // 修改文本框的内容
      inputNode.select() // 选中文本
      const success = document.execCommand('copy') // 执行浏览器复制命令
      if (success) {
        this.$message.success('复制成功')
      } else {
        this.$message.success('浏览器不支持')
      }
    },
    deleteMsg(record) {
      this.$confirm({
        title: '确定删除该消息吗?',
        cancelText: '暂不',
        onOk: res => {
          console.log(res)
          return new Promise((resolve, reject) => {
            messageDelete({ id: record.id })
              .then(res => {
                console.log(res)
                if (res.code == 200) {
                  resolve()
                  this.visible = false
                  if (this.dataSource.length == 1) {
                    this.pagination.current = 1
                  } else {
                    this.loadData()
                  }
                  this.$message.success('删除成功')
                } else {
                  this.$message.success(res.msg)
                }
              })
              .catch(err => {
                console.log(err)
              })
          }).catch(() => console.log('Oops errors!'))
        },
        onCancel() {}
      })
    },
    // 推送消息确认
    showModal(record) {
      this.$confirm({
        title: '确定给订阅改模板消息的用户发送推送吗?',
        cancelText: '暂不',
        onOk: res => {
          return new Promise((resolve, reject) => {
            sendMessage({ id: record.id })
              .then(res => {
                if (res.code == 200) {
                  this.$message.success('推送成功')
                  this.loadData()
                } else {
                  this.$message.error(res.msg)
                }
                resolve()
              })
              .catch(err => {
                reject()
                this.$message.error(err.msg)
              })
          }).catch(err => {
            reject()
          })
        },
        onCancel() {}
      })
    },
    add(record) {
      if (record) {
        this.showForm = true
        this.message = record
        this.formTile = '编辑'
      } else {
        this.formTile = '新增'
        this.message = null
        this.showForm = true
      }
    },
    // 推送消息
    sendMessage(record) {
      sendMessage(
        { id: sendMessage }.then(res => {
          if (res.code == 200) {
            this.$message.success('推送成功')
          } else {
            this.$message.error(res.msg)
          }
        })
      ).catch(err => {
        this.$message.error(err.msg)
      })
    },
    downLoad(record) {
      window.open(exportXsl + record.id,'_blank')
    }
  }
}
</script>

<style scoped lang="less">
#copy {
  position: absolute;
  opacity: 0;
}
.ml-10{
  margin-left: 10px;
}
.poster {
  width: auto;
  height: 60px;
}
.action{
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: space-between;
  // align-items: center;
}
.previmg {
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    max-width: 300px;
  }
}
</style>
